<template>
  <cjui-page-panel header="基础饼图3">
    <template #intro>
      添加了一些chart配置外的元素样式效果。
    </template>

    <CjuiEchart :loading="false" :noData="false" :options="chartOption" class="h-full" />
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import { useThemeColorVars } from '@/components/cjui/Echart/index'

const { colorVars } = useThemeColorVars()

const chartOption = computed(() => ({
  legend: {
    show: true
  },
  tooltip: {
    trigger: 'item'
  },
  graphic: [
    {
      type: 'group',
      left: 'center',
      top: '32%',
      bounding: 'raw',
      children: [
        {
          type: 'text',
          left: 'center',
          top: 0,
          style: {
            fill: colorVars.value.textRegular,
            text: '12',
            font: 'bold 26px sans-serif',
          }
        },
        {
          type: 'text',
          left: 'center',
          top: 30,
          style: {
            fill: colorVars.value.textRegular,
            text: '总数',
          }
        },
      ]
    },
  ],
  series: [
    {
      name: '饼图1',
      data: [{ name: '提示', value: 12 }, { name: '成功', value: 12 }, { name: '警告', value: 32 }, { name: '失败', value: 23 }],
      type: 'pie',
      center: ['50%', '40%'] ,
      radius: ['50%', '70%'] ,
    },
  ]
}))
</script>
